<template>
  <div class="electron_test p-20px">
    <el-card class="m-t-20px">
      <el-form 
        :inline="true"
        >
          <el-form-item label="IP地址" prop="address">
            <el-input v-model="address" placeholder="输入服务器IP地址" class="w-100px"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="password" placeholder="输入服务器密码" class="w-100px" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <div class="flex gap-10px">
            <el-button @click="openTerminal" type="primary">使用socket连接终端</el-button>
            <el-button @click="openFileDialog" type="primary">打开原生文件对话框</el-button>
            <el-button @click="toggleDarkMode">切换主题</el-button>
            <el-button @click="systemDarkMode">系统主题</el-button>
            <el-button @click="showNotification">生成底部通知</el-button>
            <div     
               class="cursor-pointer underline text-blue-500 text-20px"  
              @dragstart="handleDragStart"
              draggable="true"
            >拖拽文件到桌面</div>
               </div>         
          </el-form-item> 
      </el-form>
   
    </el-card>
    <el-card>
      <Xterm 
        ref="xtermRef" 
        v-model:isFullscreen="isFullscreen" 
      />
    </el-card>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'ElectronTest',
})
</script>
<script setup  lang="ts">
async function openFileDialog(){
  const filePath = await window.electron.openFileDialog()
  if(filePath){
    console.log(filePath,"filePath");
  }
}
const address = ref<string>('8.137.110.38')
const password = ref<string>('')
const isFullscreen = ref<boolean>(false)
const xtermRef = ref<any>(null)
function openTerminal(){
  xtermRef.value.initSocket({
    host: address.value,
    username: 'root',
    password: password.value,
    type: 'linux'
  })
}
async function toggleDarkMode(){
  const isDarkMode = await window.electron.toggleDarkMode()
  document.body.classList.toggle('dark',isDarkMode)
}
async function systemDarkMode(){
  await window.electron.systemDarkMode()
}
function handleDragStart(event: DragEvent) {
  event.preventDefault()
  window.electron.starDrag('README.md')
}
function showNotification(){
const NOTIFICATION_TITLE = '通知'
const NOTIFICATION_BODY = '通知来自渲染进程'
new window.Notification(NOTIFICATION_TITLE, { body: NOTIFICATION_BODY })
}
</script>

<style  lang="scss" scoped>
@import '@/styles/card.scss';
@import '@/styles/input.scss';
@import '@/styles/form.scss';
</style>
